<template>
  <div class="app-container flex flex-sub"
    style="background: none; height: 100%; padding: 1rem">
    <el-card shadow="never"
      class="box-card flex-sub"
      style="overflow: auto">
      <div class="div-query">
        <div class="collapse">
          <div class="collapse-header"
            @click="panelActive = !panelActive">
            <i class="collapse-header-icon"
              :class="[
                panelActive ? 'el-icon-caret-bottom' : 'el-icon-caret-top'
              ]" />
            {{ panelActive ? "隐藏" : "展开" }}查询条件
          </div>
          <div class="collapse-content">
            <el-collapse-transition>
              <div v-show="panelActive">
                <el-form size="small"
                  label-position="right">
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="设备编码"
                        label-width="140px">
                        <el-input v-model="form.deviceSource"
                          placeholder="请输入设备编码"
                          clearable>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="设备名称"
                        label-width="140px">
                        <el-input v-model="form.deviceName"
                          placeholder="请输入设备名称"
                          clearable>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="设备类型"
                        label-width="140px">
                        <el-select v-model="form.deviceType"
                          placeholder="请选择设备类型"
                          clearable
                          filterable>
                          <el-option v-for="item in collectTypeList"
                            :key="item.id"
                            :label="item.dictText"
                            :value="item.dictValue"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="设备运行状态"
                        label-width="140px">
                        <el-select v-model="form.deviceRunningState"
                          placeholder="请选择设备运行状态"
                          style="width: 100%"
                          clearable
                          @change="
                            e => {
                              if (e == '')
                                delete this.form['deviceRunningState'];
                            }
                          ">
                          <el-option v-for="item in d_list"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="设备使用情况"
                        label-width="140px">
                        <el-select v-model="form.status"
                          placeholder="请选择设备使用情况"
                          style="width: 100%"
                          clearable>
                          <el-option v-for="item in s_list"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>

                    <el-col :span="8">
                      <el-form-item label="消防主机编码"
                        label-width="140px">
                        <el-select v-model="form.hostId"
                          placeholder="请选择消防主机编码"
                          clearable
                          filterable>
                          <el-option v-for="item in fireMainList"
                            :key="item.hostCode"
                            :label="item.hostCode"
                            :value="item.hostCode">
                            <span style="float: left">{{ item.hostCode }}</span>
                            <span
                              style="
                                                                                                            float: right;
                                                                                                            color: #8492a6;
                                                                                                            font-size: 13px;
                                                                                                          ">{{ item.hostName }}</span>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="设备所在位置"
                        label-width="140px">
                        <el-input v-model="form.deviceLocation"
                          placeholder="设备所在位置"
                          clearable
                          class="filter-item search-item" />
                      </el-form-item>
                    </el-col>

                    <el-col :span="8">
                      <el-form-item label="创建时间"
                        label-width="140px">
                        <el-date-picker v-model="form.createdTime"
                          type="datetimerange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item style="margin-left: 10px">
                        <el-button type="primary"
                          icon="el-icon-search"
                          @click="search"
                          style="margin-right: 10px">搜索</el-button>
                        <el-button type="info"
                          icon="el-icon-delete"
                          @click="reset">重置</el-button>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </el-collapse-transition>
          </div>
        </div>
      </div>

      <div style="margin-bottom: 8px">
        <el-button size="small"
          type="primary"
          style="margin-right: 10px"
          @click="add">
          <i class="iconfont icon-xinzenghuizong"
            style="font-size: 13px;margin-right: 5px" />添加
        </el-button>

        <el-button slot="reference"
          size="small"
          type="danger"
          icon="el-icon-delete"
          @click="multiDelete">
          批量删除
        </el-button>
        <el-button type="primary"
          icon="el-icon-download"
          @click="downloadTemplate"
          size="small"
          style="margin: 0px; float: right">下载模板</el-button>

        <el-upload ref="upload"
          :show-file-list="false"
          :on-change="handleChange"
          accept=".xls, .xlsx"
          :action="'http://47.106.193.127:8301/main/equipment/uploadExcel'"
          :headers="headers"
          style="float: right">
          <el-button type="info"
            icon="el-icon-upload2"
            size="small"
            style="margin-right: 10px">批量导入有线探点</el-button>
        </el-upload>
      </div>

      <el-table size="medium "
        :data="dataList"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
        border
        fit
        :default-sort="{ prop: 'createdTime', order: 'descending' }"
        :header-cell-style="{ background: '#fafafa' }">
        <el-table-column type="selection"
          fixed> </el-table-column>

        <el-table-column prop="deviceSource"
          align="center"
          label="设备编码"
          width="200px"
          fixed>
        </el-table-column>

        <af-table-column prop="deviceName"
          align="center"
          label="设备名称">
        </af-table-column>

        <el-table-column align="center"
          label="设备类型"
          width="100">
          <template slot-scope="{ row }">
            {{ deviceTypeValue(row.deviceType) }}
          </template>
        </el-table-column>

        <el-table-column align="center"
          label="设备使用情况"
          width="110px">
          <template slot-scope="{ row }">
            <el-tag size="medium"
              :style="row.status | constantKeyTagStyleObj('DEVICE_STATUS')">
              {{ row.status | constantKeyValue("DEVICE_STATUS") }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="deviceRunningState"
          align="center"
          label="设备运行状态"
          width="110px">
          <template slot-scope="{ row }">
            <el-tag size="medium"
              :style="
                row.deviceRunningState
                | constantKeyTagStyleObj('DEVICE_RUNNING_STATE')
              ">
              {{
                row.deviceRunningState
                | constantKeyValue("DEVICE_RUNNING_STATE")
              }}
            </el-tag>
          </template>
        </el-table-column>
        <af-table-column prop="deviceLocation"
          align="center"
          label="设备所在位置">
          <!-- gridMountFullPathText -->
          <template slot-scope="{ row }">
            {{ row.gridMountFullPathText }}>>{{ row.deviceLocation }}
          </template>
        </af-table-column>

        <el-table-column align="center"
          label="消防主机编码"
          width="120px">
          <template slot-scope="{ row }">
            <!-- {{ fireMainValue(row.hostId) }} -->
            {{ row.hostId }}
          </template>
        </el-table-column>

        <!-- <el-table-column align="center" label="是否隔离" width="80px"
          ><template slot-scope="{ row }">
            {{ row.isIsolate == 0 ? '否' : '是' }}
          </template></el-table-column
        > -->
        <el-table-column prop="createdTime"
          align="center"
          label="创建时间"
          width="150px">
        </el-table-column>
        <!-- <el-table-column
          prop="updatedTime"
          align="center"
          label="更新时间"
          width="150px"
        >
        </el-table-column> -->
        <el-table-column align="center"
          label="操作"
          fixed="right"
          width="150px">
          <template slot-scope="{ row }">
            <el-tooltip effect="dark"
              content="详情"
              placement="top-start">
              <i class="iconfont icon-chakanxiangqing2 i-detail"
                @click="detail(row)" />
            </el-tooltip>
            <i class="iconfont icon-fengefu i-fengefu" />

            <el-tooltip effect="dark"
              content="编辑"
              placement="top-start">
              <i class="iconfont icon-bianji2 i-edit"
                @click="edit(row)" />
            </el-tooltip>
            <i class="iconfont icon-fengefu i-fengefu" />

            <el-tooltip effect="dark"
              content="删除"
              placement="top-start">
              <i class="iconfont icon-shanchu i-delete"
                @click="handleDelete(row)" />
            </el-tooltip>
            <i class="iconfont icon-fengefu i-fengefu" />
            <el-tooltip effect="dark"
              content="关联摄像头"
              placement="top-start">
              <i class="iconfont icon-fenghuangxiangmutubiao_shexiangtou i-edit"
                @click="toRelation(row)" />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0"
        :total="total"
        :page.sync="pagination.pageNum"
        :limit.sync="pagination.pageSize"
        :page-sizes="pageSizeOptions"
        @pagination="getDataList" />
    </el-card>

    <el-dialog :title="title"
      :visible.sync="showDialog"
      top="80px"
      :before-close="clickCloseBtn"
      :close-on-click-modal="false">
      <div v-if="!isDetail">
        <el-container>
          <el-main :style="{ 'max-height': maxHeightDialog }"
            class="container-main">
            <div class="title">
              <span>填写信息</span>
            </div>
            <el-card class="card"
              shadow="never"
              style="background: #fafafa; min-height: 500px">
              <el-form size="small"
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="120px"
                label-position="right">
                <div>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="所属部门"
                        prop="deptGuid">
                        <treeselect v-model="ruleForm.deptGuid"
                          :options="deptTree"
                          :normalizer="normalizer"
                          placeholder="请选择所属部门"
                          :default-expand-level="Infinity" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="所属网格"
                        prop="gridMount">
                        <treeselect v-model="ruleForm.gridMount"
                          :options="gridTree"
                          placeholder="请选择所属网格"
                          :default-expand-level="Infinity"
                          @select="getGridNode">
                          <div slot="value-label"
                            slot-scope="{ node }">
                            {{ node.raw.fullPathText }}
                          </div>
                        </treeselect>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="设备类型"
                        prop="deviceType">
                        <el-select v-model="ruleForm.deviceType"
                          placeholder="请选择设备类型"
                          clearable
                          style="width: 100%">
                          <el-option v-for="item in collectTypeList"
                            :key="item.id"
                            :label="item.dictText"
                            :value="item.dictValue.toString()">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="设备区分"
                        prop="deviceIsLine">
                        <el-select v-model="ruleForm.deviceIsLine"
                          popper-class="global-select"
                          placeholder="选择设备区分"
                          clearable
                          filterable
                          :disabled="true">
                          <el-option v-for="item in deviceIsLineList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value" />
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="消防主机编码"
                        prop="hostId">
                        <el-select v-model="ruleForm.hostId"
                          placeholder="请选择消防主机编码"
                          style="width: 100%"
                          @change="hostCount"
                          clearable>
                          <el-option v-for="item in fireMainList"
                            :key="item.hostCode"
                            :label="item.hostCode"
                            :value="item.hostCode">
                            <span style="float: left">{{ item.hostCode }}</span>
                            <span
                              style="float: right;color: #8492a6;font-size: 13px; ">
                              {{ item.hostName }}
                            </span>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="消防主机名称">
                        <el-input v-model="hostName"
                          :disabled="true"></el-input></el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="设备编码"
                        prop="deviceCode">
                        <el-input v-model="ruleForm.deviceCode"
                          placeholder="请输入设备编码"
                          @input="deviceCount"
                          clearable></el-input></el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="设备内部编码">
                        <el-input v-model="ruleForm.deviceSource"
                          :disabled="true">123</el-input></el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="设备名称"
                        prop="deviceName">
                        <el-input v-model="ruleForm.deviceName"
                          placeholder="请输入设备名称"
                          clearable></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="设备型号">
                        <el-input v-model="ruleForm.deviceModel"
                          placeholder="请输入设备型号"
                          clearable></el-input></el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="设备使用情况"
                        prop="status">
                        <el-select v-model="ruleForm.status"
                          placeholder="请选择设备使用情况"
                          style="width: 100%"
                          clearable>
                          <el-option v-for="item in s_list"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="设备运行状态"
                        prop="deviceRunningState">
                        <el-select v-model="ruleForm.deviceRunningState"
                          placeholder="请选择设备运行状态"
                          style="width: 100%"
                          clearable
                          :disabled="true">
                          <el-option v-for="item in d_list"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="设备是否激活">
                        <el-select v-model="ruleForm.isActive"
                          popper-class="global-select"
                          placeholder="选择设备是否激活"
                          clearable
                          filterable>
                          <el-option v-for="item in activeList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value" />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="激活时间">
                        <el-date-picker v-model="ruleForm.activationTime"
                          type="datetime"
                          align="right"
                          :picker-options="globalConstant.PICKER_OPTIONS"
                          placeholder="选择激活时间" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="设备所在位置"
                        prop="deviceLocation">
                        <el-input v-model="ruleForm.deviceLocation"
                          placeholder="请输入所在位置"
                          clearable></el-input></el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="ip地址">
                        <el-input v-model="ruleForm.ipAddr"
                          placeholder="请输入ip地址"
                          clearable></el-input></el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="经度">
                        <el-input v-model="ruleForm.longitude"
                          placeholder="请输入经度"
                          clearable></el-input></el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="纬度">
                        <el-input v-model="ruleForm.latitude"
                          placeholder="请输入纬度"
                          clearable></el-input></el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="厂家">
                        <el-input v-model="ruleForm.manufactor"
                          placeholder="请输入厂家"
                          clearable></el-input></el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="生产日期">
                        <el-date-picker v-model="ruleForm.manufacturingDate"
                          type="date"
                          placeholder="选择生产日期" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="设备配置">
                        <el-input v-model="ruleForm.deviceParameter"
                          placeholder="请输入设备配置"
                          clearable></el-input></el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="所属区域编码">
                        <el-input v-model="ruleForm.zoonId"
                          placeholder="请输入所属区域编码"
                          clearable></el-input></el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="说明">
                        <el-input v-model="ruleForm.description"
                          type="textarea"
                          :autosize="{ minRows: 2 }"
                          placeholder="输入说明"
                          clearable />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </el-form>
            </el-card>
          </el-main>
          <el-footer>
            <el-button @click="cancel('ruleForm')"
              style="margin-right: 10px">取 消</el-button>
            <el-button type="primary"
              @click="
                title == '新增有线探点'
                  ? submitAdd('ruleForm')
                  : submitEdit('ruleForm')
              ">确定</el-button>
          </el-footer>
        </el-container>
      </div>
      <div v-else>
        <el-container>
          <el-main :style="{ 'max-height': maxHeightDialog }"
            class="container-main">
            <el-card class="card"
              shadow="never"
              style="border: 0">
              <el-descriptions border
                :column="2"
                :labelStyle="{
                  width: '120px', color: ' #525e8c',
                  'background': '#f9fcfd', 'text-align': 'right'
                }">
                <el-descriptions-item>
                  <template slot="label">
                    所属部门:
                  </template>
                  {{ fireCollectDetail.deptName }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    所属网格:
                  </template>
                  {{ fireCollectDetail.gridMountFullPathText }}
                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">
                    设备区分:
                  </template>
                  传统有线
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    设备类型:
                  </template>
                  {{ deviceTypeValue(fireCollectDetail.deviceType) }}
                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">
                    消防主机编码:
                  </template>
                  {{ fireCollectDetail.hostId }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    消防主机名称:
                  </template>
                  {{ fireMainValue(fireCollectDetail.hostId) }}
                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">
                    设备编码:
                  </template>
                  {{ fireCollectDetail.deviceCode }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    设备内部编码:
                  </template>
                  {{ fireCollectDetail.deviceSource }}
                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">
                    设备名称:
                  </template>
                  {{ fireCollectDetail.deviceName }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    设备型号:
                  </template>
                  {{ fireCollectDetail.deviceModel }}
                </el-descriptions-item>


                <el-descriptions-item>
                  <template slot="label">
                    设备使用情况:
                  </template>
                  <!-- {{ statusChange(fireCollectDetail.status) }} -->
                  <el-tag size="medium"
                    :style="
                      fireCollectDetail.status
                      | constantKeyTagStyleObj('DEVICE_STATUS')
                    ">
                    {{
                      fireCollectDetail.status
                      | constantKeyValue("DEVICE_STATUS")
                    }}
                  </el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    设备运行状态:
                  </template>
                  <!-- {{ fireCollectDetail.deviceRunningState }} -->
                  <el-tag size="medium"
                    :style="
                      fireCollectDetail.deviceRunningState
                      | constantKeyTagStyleObj('DEVICE_RUNNING_STATE')
                    ">
                    {{
                      fireCollectDetail.deviceRunningState
                      | constantKeyValue("DEVICE_RUNNING_STATE")
                    }}
                  </el-tag>
                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">设备是否激活:
                  </template>
                  {{ fireCollectDetail.isActive == 1 ? "已激活" : "未激活" }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">激活时间:
                  </template>
                  {{ fireCollectDetail.activationTime }}
                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">
                    设备所在位置:
                  </template>
                  {{ fireCollectDetail.deviceLocation }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    ip地址:
                  </template>
                  {{ fireCollectDetail.ipAddr }}
                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">经度:
                  </template>
                  {{ fireCollectDetail.longitude }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    纬度:
                  </template>
                  {{ fireCollectDetail.latitude }}
                </el-descriptions-item>


                <el-descriptions-item>
                  <template slot="label">
                    厂家:
                  </template>
                  {{ fireCollectDetail.manufactor }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">生产日期:
                  </template>
                  {{ fireCollectDetail.manufacturingDate }}
                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">设备配置:
                  </template>
                  {{ fireCollectDetail.deviceParameter }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">所属区域编码:
                  </template>
                  {{ fireCollectDetail.zoonId }}
                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">说明:
                  </template>
                  {{ fireCollectDetail.description }}
                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">
                    创建时间:
                  </template>
                  {{ fireCollectDetail.createdTime }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    更新时间:
                  </template>
                  {{ fireCollectDetail.updatedTime }}
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-main>
          <el-footer>
            <el-button @click="showDialog = false">关闭</el-button>
          </el-footer>
        </el-container>
      </div>
    </el-dialog>

    <relation v-if="isRelationVisible"
      ref="relationDialog"
      :dialog-visible="isRelationVisible"
      :params="params"
      @close="dialogRelationClose()" />
  </div>
</template>

<script>
import fireFightManageApi from "@/api/firefight-manage";
import obj from "../../device-list/device-list";
// import the component
import Treeselect from "@riophae/vue-treeselect";
// import the styles
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Relation from "../../device-list/component/relation.vue";

import { getToken } from "@/utils/auth";
import dataTableMixins from "@/mixins/data-table-mixins";
import { validIPAddr } from "@/utils/my-validate";
import globalConstant from "@/utils/constants";
import Pagination from "@/components/Pagination";
export default {
  components: {
    Treeselect,
    Relation,
    Pagination
  },
  mixins: [dataTableMixins],
  data () {
    let validateNumber = (rule, value, callback) => {
      if (!/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(value)) {
        callback(new Error("请输入数字值"));
      } else {
        callback();
      }
    };

    return {
      title: "", // 标题
      showDialog: false, // 显示对话框
      isDetail: false, //是否详情
      form: {
        // hostId: null,
        // deviceType: null, // 设备类型
        // deviceName: null, // 设备名称
        // createdTime: null,
        // status: null, // 设备使用情况
        // deviceRunningState: null, // 设备运行状态
        // deviceSource: null, //设备编码
        // deviceLocation: '',
      },

      fireCollectDetail: {}, //消防采集详情
      fireMainList: [], //消防主机列表
      collectTypeList: [], // 有线探点列表
      s_list: obj.RecDataSearchArray.statusList,
      d_list: obj.RecDataSearchArray.deviceRunningStateList1,
      // 分页

      selectedList: [], //选中列表数据
      // 添加列表
      ruleForm: {
        id: null,

        deptGuid: null, //所属部门
        gridMount: null, //所属网格
        gridMountName: "",
        gridMountFullPath: null,
        gridMountFullPathText: null,

        deviceIsLine: 0, // 设备区分
        hostId: null, // 消防主机id
        deviceCode: null, // 设备内部编码
        deviceSource: null, // 设备编码
        deviceName: null, // 设备名称
        deviceType: null, // 设备类型
        deviceModel: null, // 设备型号
        status: null, // 设备使用情况
        deviceRunningState: "正常", // 设备运行状态
        deviceLocation: null, // 设备所在位置
        latitude: "", // 纬度
        longitude: "", // 经度
        ipAddr: null, // ip地址

        manufactor: "", // 厂家
        manufacturingDate: "", // 生产日期
        deviceParameter: "", // 设备配置
        zoonId: "", // 所属区域编码

        isActive: "", // 设备是否激活
        activationTime: "", // 激活时间
        description: "" // 说明
      },
      rules: {
        deptGuid: [
          { required: true, message: "*必填项不能为空", trigger: "change" }
        ],
        gridMount: [
          { required: true, message: "*必填项不能为空", trigger: "change" }
        ],
        deviceIsLine: [
          { required: true, message: "*必填项不能为空", trigger: "change" }
        ],
        hostId: [
          { required: true, message: "*必填项不能为空", trigger: "change" }
        ],
        deviceCode: [
          {
            required: true,
            message: "*必填项不能为空",
            trigger: "blur"
          },
          { validator: validateNumber, trigger: "blur" }
        ],
        deviceName: [
          { required: true, message: "*必填项不能为空", trigger: "blur" }
        ],
        deviceType: [
          { required: true, message: "*必填项不能为空", trigger: "change" }
        ],
        status: [
          { required: true, message: "*必填项不能为空", trigger: "change" }
        ],
        deviceRunningState: [
          { required: true, message: "*必填项不能为空", trigger: "change" }
        ],
        deviceLocation: [
          { required: true, message: "*必填项不能为空", trigger: "blur" }
        ]
      },
      gridTree: [], //网格树形列表
      deptTree: [], //部门树形列表
      headers: {
        Authorization: `bearer ${getToken()}`
      },
      hostCode: "",

      params: null,
      isRelationVisible: false,

      hostName: "",

      deviceIsLineList: obj.RecDataSearchArray.deviceIsLineList,
      isEdit: false,
      activeList: obj.RecDataSearchArray._activeList
    };
  },
  computed: {
    globalConstant () {
      return { ...globalConstant };
    }
  },
  mounted () {
    this.getDataList();
    this.getFireMainList();
    this.getCollectTypeList();
    this.getGrid();
    this.getDept();
  },
  methods: {
    // 消防采集列表
    getDataList () {
      // let createdTimeFrom = null,
      //   createdTimeTo = null
      // if (Array.isArray(this.form.createdTime)) {
      //   createdTimeFrom = this.form.createdTime[0]
      //   createdTimeTo = this.form.createdTime[1]
      // }
      const searchModel = this.formatSearchData(this.form);
      if (Array.isArray(this.form.createdTime)) {
        searchModel.createdTimeFrom = this.form.createdTime[0];
        searchModel.createdTimeTo = this.form.createdTime[1];
      }
      fireFightManageApi
        .getFireCollectList({
          ...this.pagination,
          ...searchModel,
          ...{
            deviceIsLine: 0,
          }
          // hostId: this.form.hostId,
          // deviceType: this.form.deviceType,
          // deviceName: this.form.deviceName,
          // createdTimeFrom: createdTimeFrom,
          // createdTimeTo: createdTimeTo,
          // deviceIsLine: 0, //设备默认传统有线
          // status: this.form.status,
          // deviceRunningState: this.form.deviceRunningState,
          // deviceSource: this.form.deviceSource,
          // deviceLocation: this.form.deviceLocation,
        })
        .then(res => {
          if (res.status === 200) {
            this.dataList = res.data.data.rows;
            this.total = res.data.data.total;
          } else {
            this.$message.error("获取传输设备列表失败,请重试!");
          }
        });
    },
    // 消防主机列表
    getFireMainList () {
      fireFightManageApi.getFireMainList().then(res => {
        if (res.status === 200) {
          this.fireMainList = res.data.data.rows;
        } else {
          this.$message.error("获取消防主机列表失败，请重试！");
        }
      });
    },
    // 设备类型
    getCollectTypeList () {
      fireFightManageApi.getCollectTypeList().then(res => {
        if (res.status === 200) {
          this.collectTypeList = res.data.dictValue;
        }
      });
    },
    // 获取网格列表
    getGrid () {
      fireFightManageApi.getGridTree().then(res => {
        if (res.status === 200) {
          // console.log(res.data.data.rows, '网格列表')
          this.gridTree = res.data.data.rows;
        }
      });
    },
    // 获取部门列表
    getDept () {
      fireFightManageApi.getDeptTree().then(res => {
        if (res.status === 200) {
          this.deptTree = res.data.data.rows;
        }
      });
    },
    // 搜索
    search () {
      this.pagination.pageNum = 1;
      this.getDataList();
    },

    // 多选
    handleSelectionChange (val) {
      // console.log(val, '选中')
      this.selectedList = val; // 存储选中数据
    },
    // 重置
    reset () {
      Object.keys(this.form).forEach(key => {
        this.form[key] = null;
      });
      Object.keys(this.ruleForm).forEach(key => {
        if (this.ruleForm[key] == "deviceIsLine") {
          this.ruleForm[key] = 0;
        } else {
          this.ruleForm[key] = null;
        }
      });
      this.search();
    },
    // 新增
    add () {
      this.title = "新增有线探点";
      this.isDetail = false;
      this.isEdit = false;
      this.showDialog = true;
    },
    //新增提交
    submitAdd (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.ruleForm.ipAddr && this.ruleForm.ipAddr != "") {
            if (!validIPAddr(this.ruleForm.ipAddr)) {
              this.$message({
                message: "ip地址输入的值不正确，请重新输入",
                type: "warning",
                duration: 4000
              });
              return;
            }
          }
          if (this.ruleForm.deviceCode && this.ruleForm.deviceCode !== "") {
            if (this.ruleForm.deviceCode.length > 10) {
              this.$message({
                message: "设备内部编码输入的值不正确，限定10位，请重新输入",
                type: "warning",
                duration: 4000
              });
              return;
            }
          }
          fireFightManageApi
            .deviceCodeCheck({
              deviceCode: this.ruleForm.deviceCode
            })
            .then(res => {
              if (res.status === 200) {
                if (res.data.code === 500) {
                  this.$message({
                    message: res.data.message,
                    type: "warning"
                  });
                } else {
                  fireFightManageApi.addFireCollect(this.ruleForm).then(res => {
                    if (res.status === 200) {
                      this.$message({
                        message: "添加成功!",
                        type: "success"
                      });
                      this.$refs[formName].clearValidate();
                      this.reset();
                      this.showDialog = false;
                    } else {
                      this.$message.error("添加失败,请重试!");
                    }
                  });
                }
              }
            });
        } else {
          return false;
        }
      });
    },
    // 详情
    detail (val) {
      fireFightManageApi.getFireCollectDetail({ id: val.id }).then(res => {
        if (res.status === 200) {
          this.fireCollectDetail = res.data.data;
          this.title = "有线探点详情";
          this.showDialog = true;
          this.isDetail = true;
        } else {
          this.$message.error("打开详情失败");
        }
      });
    },
    //编辑
    edit (val) {
      console.log(val);
      // val.hostId = Number(val.hostId)
      Object.keys(this.ruleForm).forEach(key => {
        Object.keys(val).forEach(_key => {
          if (key == _key) {
            this.ruleForm[key] = val[_key];
          }
        });
      });
      // console.log('this.ruleForm=', this.ruleForm)
      this.hostName = this.fireMainValue(this.ruleForm.hostId)
        ? this.fireMainValue(this.ruleForm.hostId)
        : "";

      this.title = "编辑有线探点";
      this.isDetail = false;
      this.isEdit = true;
      this.showDialog = true;
    },
    // 提交编辑
    submitEdit (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.ruleForm.ipAddr && this.ruleForm.ipAddr != "") {
            if (!validIPAddr(this.ruleForm.ipAddr)) {
              this.$message({
                message: "ip地址输入的值不正确，请重新输入",
                type: "warning",
                duration: 4000
              });
              return;
            }
          }
          if (this.ruleForm.deviceCode && this.ruleForm.deviceCode !== "") {
            if (this.ruleForm.deviceCode.length > 10) {
              this.$message({
                message: "设备内部编码输入的值不正确，限定10位，请重新输入",
                type: "warning",
                duration: 4000
              });
              return;
            }
          }
          fireFightManageApi.updateFireCollect(this.ruleForm).then(res => {
            if (res.status === 200) {
              this.$message({
                message: "编辑成功!",
                type: "success"
              });
              this.$refs[formName].clearValidate();
              this.showDialog = false;
              this.reset();
            } else {
              this.$message.error("编辑失败,请重试!");
            }
          });
        } else {
          return false;
        }
      });
    },
    // 删除
    handleDelete (val) {
      this.$confirm("是否确认删除该有线探点?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(
        () => {
          fireFightManageApi.deleteFireCollect(val.id).then(res => {
            if (res.status === 200) {
              this.$message({
                message: "删除成功!",
                type: "success"
              });
              this.reset();
              this.showDialog = false;
            } else {
              this.$message.error("删除失败,请重试!");
            }
          });
        },
        () => { }
      );
    },
    // 批量删除
    multiDelete () {
      let ids = [];
      if (this.selectedList.length == 0) {
        this.$message({
          message: "请选择要删除的有线探点",
          type: "warning"
        });
      } else {
        this.selectedList.forEach(e => {
          ids.push(e.id);
        });

        this.$confirm("是否确认删除选中有线探点?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消"
        }).then(
          () => {
            fireFightManageApi.deleteFireCollect(ids.join(",")).then(res => {
              if (res.status === 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.reset();
              } else {
                this.$message.error("删除失败,请重试!");
              }
            });
          },
          () => { }
        );
      }
    },
    // 取消
    cancel (formName) {
      this.clearRuleForm();
      this.$nextTick(() => {
        this.$refs[formName].clearValidate(); //清空校验
      });
      this.showDialog = false;
    },
    // 关闭按钮
    clickCloseBtn (done) {
      this.clearRuleForm();
      done();
    },
    // 自定义树形控件键名
    normalizer (node) {
      return {
        id: node.guid,
        label: node.label,
        children: node.children
      };
    },
    // 设备类型字典数据处理
    deviceTypeValue (deviceType) {
      let val = this.collectTypeList.find(e => {
        return e.dictValue == deviceType;
      });
      if (val) {
        return val.dictText;
      }
    },
    // 所属消防主机数据处理
    fireMainValue (hostId) {
      console.log("fireMainList=", this.fireMainList);
      console.log("hostId=", hostId);
      let obj = this.fireMainList.find(val => {
        return hostId.toString() == val.hostCode;
      });
      if (obj) {
        // return obj.hostCode
        return obj.hostName;
      }
    },
    // 有线探点状态处理
    statusChange (val) {
      let s = this.s_list.find(_val => {
        return val == _val.value;
      });
      if (s) {
        return s.label;
      }
    },
    // 下载模板
    downloadTemplate () {
      window.location.href =
        "http://47.106.193.127:8231/uploads/sys-file/device/设备导入模板-参照.xls";
    },
    //重置ruleForm
    clearRuleForm () {
      Object.keys(this.ruleForm).forEach(e => {
        this.ruleForm[e] = null;
      });
    },
    handleChange (file) {
      // console.log('file', file)
      const loading = this.$loading({
        lock: true,
        text: "正在导入数据，请稍候",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });

      switch (file.status) {
        case "ready":
          break;
        case "success":
          loading.close();
          let str = "";
          if (file.response && file.response.length !== 0) {
            file.response.forEach(ele => {
              str = str + `<div>${ele}</div>`;
            });
          }
          this.$alert(str, "提示", {
            dangerouslyUseHTMLString: true,
            callback: action => {
              this.reset();
            }
          });

          break;
        case "fail":
          loading.close();
          this.$message.error("导入文件失败，请重新导入！");
      }
    },
    // 关联设备编码拼接
    hostCount (val) {
      // let host = this.fireMainList.find((_val) => {
      //   return val == _val.id
      // })
      // if (host) {
      //   this.hostCode = host.hostCode
      //   this.ruleForm.deviceSource = this.hostCode + this.ruleForm.deviceCode
      // }

      this.ruleForm.deviceSource = val + this.ruleForm.deviceCode;

      this.hostName = this.fireMainValue(val) ? this.fireMainValue(val) : "";
    },
    deviceCount (val) {
      this.ruleForm.deviceSource = this.ruleForm.hostId + val;
    },

    toRelation (row) {
      this.params = row;
      this.isRelationVisible = true;
    },
    dialogRelationClose () {
      this.params = null;
      this.isRelationVisible = false;
    },
    // 获取网格节点数据
    getGridNode (node) {
      this.ruleForm.gridMountName = node.label;
      this.ruleForm.gridMountFullPath = node.fullPath;
      this.ruleForm.gridMountFullPathText = node.fullPathText
        ? node.fullPathText
        : "";

      this.ruleForm.longitude = node.longitude;
      this.ruleForm.latitude = node.latitude;
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../../../../styles/part-custom";

/deep/ .el-descriptions :not(.is-bordered) .el-descriptions-item__cell {
  padding-bottom: 6px;
}

/deep/.el-descriptions .is-bordered .el-descriptions-item__cell {
  border: 1px solid #e6ebf5;
  padding: 6px 10px;
}
</style>
